<template>
  <view class="home-page">
    <!-- 顶部导航 -->
    <!-- <view class="nav-bar">
      <text class="nav-title">业务宝首页</text>
      <text class="nav-subtitle">ywb.longdingbigdata.com</text>
    </view> -->

    <!-- 快捷操作按钮 -->
    <view class="btn-group">
      <button class="btn go-report" @click="goReport">马上报单</button>
      <button class="btn package-info" @click="goPackage">套餐信息</button>
      <button class="btn white-list" @click="goWhite">白名单</button>
      <button class="btn notice" @click="goNotice">通知公告</button>
    </view>

    <!-- 排行卡片（年度/月度/本周） -->
    <view class="rank-card" @click="goRank('year')">
      <view class="card-header year-header">
        <text class="card-tag">本年排行</text>
        <text class="more">更多</text>
      </view>
      <view class="rank-list" >
        <view class="list-item" v-for="(item, index) in yearRank" :key="index">
          <text class="rank-tag" :style="{background: item.bg}">{{ item.rank }}{{item.medal.icon}}</text>
                   <text class="name">{{ item.username }}</text>
                   <text class="num" :style="{color:'#28a745'}">↑ {{ item.handle_count || '' }}</text>
        </view>
      </view>
    </view>

    <view class="rank-card" @click="goRank('month')" v-if="monthRank.length>0">
      <view class="card-header month-header">
        <text class="card-tag">本月排行</text>
        <text class="more">更多</text>
      </view>
      <view class="rank-list">
        <view class="list-item" v-for="(item, index) in monthRank" :key="index">
          <text class="rank-tag" :style="{background: item.bg}">{{ item.rank }}{{item.medal.icon}}</text>
          <text class="name">{{ item.username }}</text>
          <text class="num" :style="{color:'#28a745'}">↑ {{ item.handle_count || '' }}</text>
        </view>
      </view>
    </view>

    <view class="rank-card" @click="goRank('week')" v-if="weekRank.length>0">
      <view class="card-header week-header">
        <text class="card-tag">本周排行</text>
        <text class="more">更多</text>
      </view>
      <view class="rank-list">
        <view class="list-item" v-for="(item, index) in weekRank" :key="index">
          <text class="rank-tag" :style="{background: item.bg}">{{ item.rank }}{{item.medal.icon}}</text>
          <text class="name">{{ item.username }}</text>
          <text class="num" :style="{color:'#28a745'}">↑ {{ item.handle_count || '' }}</text>
        </view>
      </view>
    </view>
	<view class="rank-card" @click="goRank('week')" v-if="dayRank.length>0">
	  <view class="card-header day-header">
	    <text class="card-tag">本日排行</text>
	    <text class="more">更多</text>
	  </view>
	  <view class="rank-list">
	    <view class="list-item" v-for="(item, index) in dayRank" :key="index">
	      <text class="rank-tag" :style="{background: item.bg}">{{ item.rank }}{{item.medal.icon}}</text>
	      <text class="name">{{ item.username }}</text>
	      <text class="num" :style="{color:'#28a745'}">↑ {{ item.handle_count || '' }}</text>
	    </view>
	  </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟年度排行数据
      yearRank: [],
      // 模拟月度排行数据
      monthRank: [],
      // 新增本周排行数据
      weekRank: [],
	  dayRank:[]
    }
  },
  onLoad() {
  	uni.showLoading({
  		title:'加载中...'
  	})
  },
  onShow() {
  	this.getBusinessState()
  },
  methods: {
	// 统计排行
	async getBusinessState(){
		const res = await this.$api.get('/Business/agentRanking','',true)
		if(res.data.code === 200) {
			uni.hideLoading()
			this.yearRank = res.data.data.year.ranking
			this.monthRank = res.data.data.month.ranking
			this.weekRank = res.data.data.week.ranking
			this.dayRank = res.data.data.day.ranking
		}
	},
    // 快捷按钮跳转（可根据实际需求完善）
    goReport() { 
		if(!this.$api.getToken()) {
			this.$api.modal('提示', '请先登录', false,).then((res) => {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			})
			return 
		}
		
		uni.navigateTo({
			url:'/pages/quickOrder/quickOrder'
		})
	},
    goPackage() { 
		if(!this.$api.getToken()) {
			this.$api.modal('提示', '请先登录', false,).then((res) => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						})
			return 
		}
		uni.navigateTo({
			url:'/pages/package/package'
		})
	},
    goWhite() { 
		if(!this.$api.getToken()) {
			this.$api.modal('提示', '请先登录', false,).then((res) => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						})
			return 
		}
		uni.navigateTo({
			url:'/pages/whitelist/addWhitelist/addWhitelist'
		})
	},
    goNotice() {
		if(!this.$api.getToken()) {
			this.$api.modal('提示', '请先登录', false,).then((res) => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						})
			return 
		}
		uni.navigateTo({
			url:'/pages/Notice/Notice'
		})
	},
    
    // 跳转排行榜页面
    goRank(type) {
      uni.navigateTo({
        url: `/pages/rank/rank?type=${type}`
      })
    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.home-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 16rpx;
}

/* 导航栏 */
.nav-bar {
  background: linear-gradient(90deg, #2c82c9, #3a9ee6);
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}
.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}
.nav-subtitle {
  font-size: 24rpx;
  color: #e6f2ff;
  margin-top: 4rpx;
}

/* 快捷按钮组 */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}
.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 8rpx;
  border: none;
}
.go-report { background: #28a745; }
.package-info { background: #fd7e14; }
.white-list { background: #dc3545; }
.notice { background: #ffc107; }

/* 排行卡片通用样式 */
.rank-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.rank-card:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.card-tag {
  font-size: 28rpx;
  font-weight: bold;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  color: #fff;
}
.year-header .card-tag { background: #17a2b8; }
.month-header .card-tag { background: #ffc107; }
.week-header .card-tag { background: #28a745; }
.day-header .card-tag { background: #28a745;}
.more {
  font-size: 24rpx;
  color: #666;
}

/* 排行列表 */
.rank-list {
  border-top: 1px solid #eee;
  padding-top: 16rpx;
}
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.rank-tag {
  width: 48rpx;
  height: 48rpx;
  line-height: 48rpx;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
}
.name {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}
.num {
  font-size: 26rpx;
}
</style>